有3個關於CSS動畫很常碰到的屬性:Transition、Transform、Animation
如何巧妙地運用這3個屬性來呈現出網頁動畫，接著就來一一解鎖他們吧~

Transition 轉場效果

Transition 屬性有4項操作
依寫法順序:

1. transition-property 指定目標
2. transition-duration 時間長度
3. transition-timing-function 速度變化
4. transition-delay 延遲時間

transition: property duration timing-function delay;

transition-duration 時間長度 & transition-delay 延遲時間

• 以秒為單位，1秒以1s來表示，也可用毫秒為單位，1毫秒以1ms來表示*(1000ms=1s)*
• transition-duration負值無效，但transition-delay的時間則可為負值
• transition-delay負值會扣掉設定的秒數，直接啟動轉場效果

範例:
繼續使用上一篇的盒子，將box1transition-delay設為負值，box2沒有設transition-delay

.box1{
    background-color: aquamarine;
    margin:20px 0px;
    transition:5s ease-in -3s;
}
.box1:hover{
    opacity:0.3;
    width:500px;  
  }
.box2{
    background-color: rgb(255, 240, 127);
    margin:20px 0px;
    transition:5s ease-in; 
}
.box2:hover{
    opacity:0.5;
    width:500px;
  }

實作結果:
兩個box的起始點很不同

box2花了5秒才完成
box1轉場馬上會跳到2秒的位置，回應 transition-delay 為-3s，且只花2秒

transition-timing-function 速度變化

有以下幾種表達速度的方式:

• ease 加速再減速，不對稱 (預設值)
• ease-in 慢慢加速
• ease-out 慢慢減速
• ease-in-out 加速再減速，對稱
• linear 等速
• cubic-bezier 貝茲曲線
  逐格效果
• steps(步數,目的地] )
• step-start=steps(1, start)
• step-end=steps(1, end)
  目的地:start/end(預設值)
  start：直接開始
  end：直接結束。是默认值。

前面使用到的就是 ease-in 慢慢加速
貝茲曲線可以讓你填入參數(n,n,n,n)
這裡可以取得你所需要的貝茲曲線

transition-property 指定目標

能更精準掌控元件要展現出轉場的動畫效果
如果所有CSS都要轉場就填上all(預設值)，都不要就填上none

範例:
將box2 transition-property 指定為width

 .box2{
    background-color: rgb(255, 240, 127);
    transition-property:width;
    transition-duration:6s;
    transition-timing-function:lnear;
}
.box2:hover{
    width:250px;
    height:250px;
  }

實作結果:
長寬都由125px變為250px，但只有寬度有transition的動畫
▼ 3s ▼

▼ 6s ▼

各自有各自的轉場

可以設定寬度與高度轉場的時間不同，只要使用逗號 , 就可以幫你做到這個功能
範例:
將box2觸發時的transition設為width 8s, height 4s
回復時width 4s, height 8s

.box2{
    background-color: rgb(255, 240, 127);
    transition-property:width;
    transition:width 4s, height 8s;
}
.box2:hover{
    width:250px;
    height:250px;
    transition:width 8s, height 4s;
  }

實作結果:
觸發後，高度跑得比較快，寬度則比較慢
滑鼠移開時，則相反~
▼ 觸發4s ▼

▼ 觸發8s ▼

▼ 收回4s ▼